<template>
	<div class="login-wrapper">
		<div class="login">
			<div class="title">{{ $t('header.sineng') }}</div>
			<div class="card">
				<div class="loginName">
					<p>{{ $t('header.loginName') }}</p>
					<n-input v-model:value="form.loginName" type="text" />
				</div>
				<div class="password">
					<p>{{ $t('header.password') }}</p>
					<n-input
						v-model:value="form.password"
						type="password"
						@keyup.enter="handleLogin()"
					/>
				</div>
				<n-button class="btn" type="primary" @click="handleLogin">{{
					$t('btn.login')
				}}</n-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user';

const form = reactive({
	loginName: 'admin',
	password: 'admin@123',
});
const router = useRouter();

async function handleLogin() {
	const userStore = useUserStore();
	const res = await userStore.login(form);
	router.push('/');
}
</script>

<style lang="scss" scoped>
.login-wrapper {
	position: relative;
	height: 100%;
	background: url('@/assets/img/login_bg.png') no-repeat center;

	.login {
		position: absolute;
		top: 22%;
		right: 18%;
		width: 560px;
		color: #fff;
		border-radius: 8px;

		.title {
			margin-bottom: 30px;
			font-size: 36px;
			text-align: center;
		}

		.card {
			width: 100%;
			height: 412px;
			padding: 54px 120px 0;
			background-color: #2b3340;
			box-sizing: border-box;

			.loginName,
			.password {
				margin-bottom: 64px;
			}

			.btn {
				width: 100%;
			}
		}

		p {
			margin: 0;
			margin-bottom: 12px;
		}
	}
}
</style>
